import G6 from "@antv/g6"
G6.registerNode('card-node', {
    draw(cfg, group) {
        const r = 4, w = cfg.size[0], h = cfg.size[1], { data } = cfg;
        const shape = group.addShape('rect', {
            attrs: {
                x: -w / 2,//矩形左上角的x坐标
                y: -h / 2,//矩形左上角的y坐标
                width: w,//矩形宽度
                height: h,//矩形高度
                radius: r,
                fill: '#fff',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: "rgba(0,0,0,0.1)",
                shadowBlur: 8,
            },
            name: 'main-box'
        });
        // 下面是上面那个大矩形盒子的子内容
        group.addShape('rect', {
            attrs: {
                x: -w / 2,
                y: -h / 2,
                width: w,
                height: 73,
                fill: 'blue',
                radius: [r, r, 0, 0]
            }, name: 'top-box',
            draggable: true
        })
        // cardNumber 卡号----设置
        const cardNumberText = group.addShape('text', {
            attrs: {
                fontSize: 14,
                lineHeight: 22,
                text: data.cardNumber,
                fill: '#fff'
            }, name: 'institution-title'
        })
        // item.getBBox()获取元素的包围盒,(涉及一下)，text本身也能定位的
        const cardNumberTextBox = cardNumberText.getBBox();
        console.log({ cardNumberTextBox })
        cardNumberText.attr({
            x: -w / 2 + 8,
            y: -h / 2 + cardNumberTextBox.height + 8
        })


        // 以下我只要是文字就这么设计，小编会删掉一部分类似的代码
        // 机构---------位置
        const institutionText = group.addShape("text", {
            attrs: {
                fontSize: 14,
                lineHeight: 22,
                text: data.institution.length < 18 ? data.institution : data.institution.slice(0, 18) + "···",
                fill: "#fff",
            },
            name: "institution-title",
        });
        // 获取机构文本的盒子
        const institutionTextBox = institutionText.getBBox();
        institutionText.attr({
            x: -w / 2 + 8, // x坐标
            y: -h / 2 + institutionTextBox.height + 30, // y坐标
        });
        // grade等级 ---- 设置
        const gradeRect = group.addShape("rect", {
            attrs: {
                width: 50,
                height: 24,
                fill: "#fff",
                radius: [0, 4, 0, 10],
            },
            name: "grade-rect",
        });

        const gradeText = group.addShape("text", {
            attrs: {
                fontSize: 14,
                lineHeight: 22,
                text: data.grade + "级",
                fill: "blue",
            },
            name: "grade-title",
        });
        // 这里是对矩形盒子与文字定位，使文章能居中矩形
        const gradeRectBox = gradeRect.getBBox();
        const gradeTextBox = gradeText.getBBox();
        gradeRect.attr({
            x: w / 2 - gradeRectBox.width,
            y: -h / 2,
        });
        gradeText.attr({
            x: w / 2 - gradeTextBox.width - 12, // x坐标
            y: -h / 2 + gradeTextBox.height + 7, // y坐标
        });
        // ---自此，小编demo绘制图形最常用的知识点就在上面了
        // 绘制边界线
        group.addShape("rect", {
            attrs: {
                width: w,
                height: 1,
                fill: "#D9D9D9",
                radius: 2,
                x: -w / 2,
                y: -h / 2 + 138,
            },
            name: "tag-rect",
        });
        // 以下就是功能模块的实现 ---------------
        // tools矩形框 ---- 设置
        const tools = group.addShape("rect", {
            attrs: {
                width: w,
                height: 32,
                radius: r,
                fill: "#fff",
                shadowOffsetX: 0,
                shadowOffsetY: 4,
                shadowColor: "rgba(0,0,0,0.1)",
                shadowBlur: 8,
            },
            name: "tools-box",
        });
        tools.attr({
            x: -w / 2,
            y: h / 2 + 4,
        });
        // 添加同级 ---- 设置
        const peerAdd = group.addShape("image", { // 这里的类型
            attrs: {
                height: 24,
                width: 70,
                cursor: "pointer",
                img: require("@/assets/img/cir-1.png"), // 注意：这本地图片小编用require的方式实现的
            },
            name: "peer-item", // 这里的名称，在后续执行逻辑的时候就会用到了，所以定义时语义化点
        });
        peerAdd.attr({
            x: -w / 2 + 15,
            y: h / 2 + 8,
        });

        // 添加下级 ---- 设置
        const juniorAdd = group.addShape("image", {
            attrs: {
                height: 24,
                width: 70,
                cursor: "pointer",
                img: require("@/assets/img/cir-1.png"),
            },
            name: "junior-item",
        });
        juniorAdd.attr({
            x: -w / 2 + 105,
            y: h / 2 + 8,
        });
        // 删除节点 ---- 设置
        const nodeDelete = group.addShape("image", {
            attrs: {
                height: 24,
                width: 70,
                cursor: "pointer",
                img: require("@/assets/img/cir-1.png"),
            },
            name: "delete-item",
        });
        nodeDelete.attr({
            x: -w / 2 + 195,
            y: h / 2 + 8,
        });
        // 更新数据 ---- 设置
        const nodeUpdate = group.addShape("image", {
            attrs: {
                height: 22,
                width: 70,
                cursor: "pointer",
                img: require("@/assets/img/cir-1.png"),
            },
            name: "update-item",
        });
        const nodeUpdateBox = nodeUpdate.getBBox();
        nodeUpdate.attr({
            x: -w / 2,
            y: -h / 2 - nodeUpdateBox.height - 4,
        });
        // 编辑 ---- 设置
        const nodeEdit = group.addShape("image", {
            attrs: {
                height: 22,
                width: 44,
                cursor: "pointer",
                img: require("@/assets/img/cir-1.png"),
            },
            name: "edit-item",
        });
        const nodeEditBox = nodeEdit.getBBox();
        nodeEdit.attr({
            x: -w / 2 + 95,
            y: -h / 2 - nodeEditBox.height - 4,
        });
        // 这个逻辑是确定终结点是否展示的，小编的demo中有
        // 没有子节点添加终结点同时没有原因
        if ((!cfg.children || !cfg.children.length) && cfg.reason === "") {
            // 终结点 ---- 设置
            const nodeLast = group.addShape("image", {
                attrs: {
                    height: 22,
                    width: 56,
                    cursor: "pointer",
                    img: require("@/assets/img/cir-1.png"),
                },
                name: "last-item",
            });
            // const nodeEditBox = nodeEdit.getBBox();
            nodeLast.attr({
                x: w / 2 + 8,
                y: h / 2 + 8,
            });
        }
        return shape;
    },
    setState(name, value, item) {
        console.log({ name, value, item })
    },
    update(cfg, node) {
        const group = node.getContainer(); // 获取容器
        console.log({ group})

        console.log({ cfg, node })
    }
})
export default {
    install(Vue) {
        Vue.prototype.$G6 = G6;
    },
};